<script setup lang="ts">
const cssColor: string[] = []
function randomColor() {
  let color = Math.floor(Math.random() * 16777215).toString(16)
  if (color.length < 6) {
    color.padEnd(6, '0')
  }
  return '#' + color
}
for (let i = 0; i < 20; i++) {
  cssColor.push(randomColor())
}
</script>
<template>
  <div class="page-loading">
    <div class="loading-wrapper">
      <div
        class="loading-item"
        v-for="item in cssColor"
        :key="item"
        :style="{
          backgroundColor: item,
        }"
      ></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.page-loading {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  // background-color: rgba(0, 0, 0, 0.3);
  background-color: rgb(255, 255, 255,0.8);
  .loading-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10em;
    .loading-item {
      width: 0.3em;
      height: 10em;
      animation: groove infinite 2s ease-in-out backwards alternate;
      & + .loading-item {
        margin-left: 5px;
      }
    }
    @for $i from 1 through 10 {
      .loading-item:nth-child(#{$i * 2}) {
        animation-delay: $i * 0.3s;
      }
      .loading-item:nth-child(#{$i * 2 - 1}) {
        animation-delay: $i * 0.2s;
      }
    }
  }
}
@keyframes groove {
  0% {
    height: 0em;
  }
  100% {
    height: 10em;
  }
}
</style>
